<template>
    <Card style="width:100%" class="detail-content-layout mb16">
        <template #title>
            {{ $t('财务核算') }}
        </template>
        <template #extra>
            <div class="h-arrow-wrap" @click="toggle = !toggle">
                <i :class="{toggleActive:toggle}" class="iconfont zy-common-jiantou h-arrow-icon"></i>
            </div>
        </template>
        <transition name="slide-up">
            <div v-if="toggle">
                <Form ref="form" :model="form" :rules="rules" label-position="top">
                    <Row :gutter="24">
                        <Col span="6">
                            <FormItem :label="$t('预算层级金额')" prop="crovBdgWobdg">
                                <!--                <Input  clearable type="text" v-model.number="form.crovBdgWobdg  | thousandth" :placeholder="$t('请输入')">-->
                                <!--                  <template #prepend>-->
                                <!--                    <span>k￥</span>-->
                                <!--                  </template>-->
                                <!--                </Input>-->
                                <InputNumber class="prependMoneyIcon"
                                             style="width: 100%"
                                             max="999999999"
                                             disabled
                                             clearable
                                             type="number"
                                             number
                                             v-model.number="form.crovBdgWobdg"
                                             :placeholder="$t('请输入')"
                                             :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                             :parser="value => value.replace(/k\￥\s?|(,*)/g, '')"/>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem :label="$t('实际批复')" prop="actualTotalApproved">
                                <!--                <Input disabled clearable type="text" v-model.number="form.actualTotalApproved"-->
                                <!--                       :placeholder="$t('请输入')">-->
                                <!--                  <template #prepend>-->
                                <!--                    <span>k￥</span>-->
                                <!--                  </template>-->
                                <!--                </Input>-->
                                <InputNumber class="prependMoneyIcon"
                                             style="width: 100%"
                                             max="999999999"
                                             disabled
                                             clearable
                                             type="number"
                                             number
                                             v-model.number="form.actualTotalApproved"
                                             :placeholder="$t('请输入')"
                                             :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                             :parser="value => value.replace(/k\￥\s?|(,*)/g, '')"/>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem :label="$t('已拨款')" prop="paid">
                                <!--                <Input disabled clearable type="text" v-model.number="form.paid" :placeholder="$t('请输入')">-->
                                <!--                  <template #prepend>-->
                                <!--                    <span>k￥</span>-->
                                <!--                  </template>-->
                                <!--                </Input>-->
                                <InputNumber class="prependMoneyIcon"
                                             style="width: 100%"
                                             max="999999999"
                                             disabled
                                             clearable
                                             type="number"
                                             number
                                             v-model.number="form.paid"
                                             :placeholder="$t('请输入')"
                                             :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                             :parser="value => value.replace(/k\￥\s?|(,*)/g, '')"/>

                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem :label="$t('未拨款')" prop="unPaid">
                                <!--                <Input disabled clearable type="text" v-model.number="form.unPaid" :placeholder="$t('请输入')">-->
                                <!--                  <template #prepend>-->
                                <!--                    <span>k￥</span>-->
                                <!--                  </template>-->
                                <!--                </Input>-->

                                <InputNumber class="prependMoneyIcon"
                                             style="width: 100%"
                                             max="999999999"
                                             disabled
                                             clearable
                                             type="number"
                                             number
                                             v-model.number="form.unPaid"
                                             :placeholder="$t('请输入')"
                                             :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                             :parser="value => value.replace(/k\￥\s?|(,*)/g, '')"/>


                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem :label="$t('预算余额')" prop="budgetAvailability">
                                <!--                <Input disabled clearable type="text" v-model.number="form.budgetAvailability" :placeholder="$t('请输入')">-->
                                <!--                  <template #prepend>-->
                                <!--                    <span>k￥</span>-->
                                <!--                  </template>-->
                                <!--                </Input>-->
                                <InputNumber class="prependMoneyIcon"
                                             style="width: 100%"
                                             max="999999999"
                                             disabled
                                             clearable
                                             type="number"
                                             number
                                             v-model.number="form.budgetAvailability"
                                             :placeholder="$t('请输入')"
                                             :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                             :parser="value => value.replace(/k\￥\s?|(,*)/g, '')"/>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem :label="$t('实际收益')" prop="actualBenefits">


                                <!--                <Input :disabled="disabled" max="999999999" @on-change="(val)=>{form.actualBenefits = String(val).substr(0,9)}" maxlength="9" clearable type="number" number v-model.number="form.actualBenefits" :placeholder="$t('请输入')">-->
                                <!--                  <template #prepend>-->
                                <!--                    <span>k￥</span>-->
                                <!--                  </template>-->
                                <!--                </Input>-->

                                <InputNumber class="prependMoneyIcon" style="width: 100%" max="999999999"
                                             :disabled="disabled" clearable type="number" number
                                             v-model.number="form.actualBenefits"
                                             :placeholder="$t('请输入')"
                                             :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                             :parser="value => value.replace(/k\￥\s?|(,*)/g, '')">
                                    <!--                        :formatter="value => `k￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"-->
                                    <!--                        :parser="value => value.replace(/k\￥\s?|(,*)/g, '')">-->
                                    <!--                 >-->
                                    <!--                  <template #prepend>-->
                                    <!--                    <span>k￥</span>-->
                                    <!--                  </template>-->
                                </InputNumber>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem :label="$t('实际投资回报率')" required>
                                <Input disabled clearable type="text" v-model.number="form.actualROI"
                                       :placeholder="$t('请输入')">
                                    <template #append>
                                        <span>年</span>
                                    </template>
                                </Input>
                            </FormItem>
                        </Col>
                        <Col span="6">
                            <FormItem :label="$t('提交人')" v-if="disabled">
                                <Input disabled clearable type="text" v-model="form.submitByStr"
                                       :placeholder="$t('请输入')"></Input>
                            </FormItem>
                        </Col>
                        <Col span="18">
                            <FormItem :label="$t('备注')">
                                <Input maxlength="200" :disabled="disabled" clearable type="text" v-model="form.remark"
                                       :placeholder="$t('请输入')"></Input>
                            </FormItem>
                        </Col>
                        <Col span="6" v-if="disabled">
                            <FormItem :label="$t('提交时间')">
                                <Input disabled clearable type="text" v-model="form.submitTime"
                                       :placeholder="$t('请输入')"></Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <rejectInfo :rejectFlows="rejectFlows"/>
            </div>
        </transition>
    </Card>
</template>

<script>
import mixins from "@/views/devBasic/capex/components/mixins";
import rejectInfo from "@/views/devBasic/capex/components/rejectInfo";

export default {
    name: "postCalculation",
    components: {rejectInfo},
    mixins: [mixins],
    props: {
        info: {
            type: Object,
            default: () => {
            }
        },
        disabled: {
            type: Boolean,
            default: false
        },
        approvalInfo: {
            type: Object,
            default: () => {
            }
        },
        rejectFlows: {
            type: Object,
            default: () => {
            }
        },
    },
    data() {

        const validateInput = (rule, value, callback) => {
            if (String(value).length > 9) {
                this.form.actualBenefits = String(value).substr(0, 9)
                callback(new Error(this.$t('请输入')));
            } else {
                callback();
            }
        };

        return {
            toggle: true,
            form: {
                crovBdgWobdg: "",
                actualTotalApproved: "",
                unPaid: "",
                paid: "",
                budgetAvailability: "",
                actualBenefits: "",
                actualROI: ""
            },
            rules: {
                crovBdgWobdg: [{required: true, type: "number", message: this.$t('请输入'), trigger: 'blur'}],
                actualTotalApproved: [{required: true, type: "number", message: this.$t('请输入'), trigger: 'blur'}],
                unPaid: [{required: true, type: "number", message: this.$t('请输入'), trigger: 'blur'}],
                paid: [{required: true, type: "number", message: this.$t('请输入'), trigger: 'blur'}],
                budgetAvailability: [{required: true, type: "number", message: this.$t('请输入'), trigger: 'blur'}],
                actualBenefits: [{required: true, type: "number", message: this.$t('请输入'), trigger: 'blur'}],
                // actualROI: [{required: true, type: "number", message: this.$t('请输入'), trigger: 'blur'}],
            }
        }
    },
    mounted() {
        this.form.submitByStr = this.userName
        let {
            bdgAmount,
            downPaymentDto1 = {},
            downPaymentDto2 = {},
            downPaymentDto3 = {},
            estimatedBenefits,
            bdgAmoutCount
        } = this.info;

        if (this.info.source === 'child') {
            bdgAmount = bdgAmoutCount;
        }
        let paid = ((downPaymentDto1.dpAmount || 0) / 1 + (downPaymentDto2.dpAmount || 0) / 1 + (downPaymentDto3.dpAmount || 0) / 1) / 1000;

        bdgAmount = bdgAmount / 1;

        let _actualROI = (estimatedBenefits && estimatedBenefits > 0) ? ((paid / estimatedBenefits).toFixed(2)) / 1 : 0;

        this.form = Object.assign(this.form, {
            crovBdgWobdg: bdgAmount,
            actualTotalApproved: bdgAmount,
            unPaid: bdgAmount - paid,
            paid,
            budgetAvailability: bdgAmount - paid,
            actualBenefits: estimatedBenefits || 0,
            // actualROI: ((((actualBenefits - paid) / paid * 100)).toFixed(2)) / 1
            actualROI: _actualROI
        })

        this.$forceUpdate()

        if (this.disabled) {
            this.setParams()
            this.toggle = false
            return;
        }

        if (!this.disabled && this.approvalInfo.submitRemark) {
            this.setParams()
        }

        // else if (this.rejectFlows && this.rejectFlows.approvalRemark) {
        //   this.setParams()
        //   this.toggle = true
        // }
    },
    methods: {
        setParams() {
            const {submitRemark, submitTime, submitByStr} = this.approvalInfo
            const {
                crovBdgWobdg,
                actualTotalApproved,
                unPaid,
                paid,
                budgetAvailability,
                actualBenefits,
                actualROI
            } = this.info
            this.form = Object.assign(this.form, {
                remark: submitRemark,
                submitTime,
                submitByStr,
                // crovBdgWobdg,
                // actualTotalApproved,
                // unPaid,
                // paid,
                // budgetAvailability,
                actualBenefits,
                actualROI

            })


            this.$forceUpdate()
        },
        async getParams(status) {
            const valid = status ? status : await this.$refs.form.validate()
            if (valid) {
                return {
                    ...this.form
                }
            }
        }
    }
}
</script>

<style scoped lang="scss">
@import "./style";
</style>

